<!DOCTYPE html>
<html lang="en">
<head>
 <bgsound src="../姜云升 - 浪漫主义.mp3" loop=n>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">
    <title>Baby qiu</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/fontsize.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <script src="./js/music.js"></script>
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
  </head>
<body>

 <!--音乐-->
<div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;">
  <div id="yinfu" class="rotate"></div>
  <audio preload="auto" autoplay="autoplay" id="media" src="./姜云升 - 浪漫主义.mp3" 
    autoplay preload loop="loop"></audio>
</div>


   <!--  头部 -->
    <div class="header">
        <ul class="nav">
            <li class="nav-item">
              <a class="nav-link active" href="./index.html">home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./egg.html">We</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./like.html">Like</a>
            </li>
       
          </ul>
    </div>
  <!--   头部 -->
  <!-- 轮播图 -->
  <div class="focus">
  <div class="focus_item">
        <p  class="animate__animated animate__fadeInRight">简单点,糊涂点,开心点</p>
  </div>
  <div class="focus_item1">
    <p class="animate__animated animate__fadeInLeft">快乐与平凡最浪漫</p>
</div>
<div class="focus_item2">
  <p class="animate__animated animate__fadeInLeft">希望你每天都开心</p>
</div>

    <div class="swiper mySwiper">
       <div class="swiper-wrapper">
          <div class="swiper-slide">
             <img src="./images/20.jpg" alt="">
          </div>
          <div class="swiper-slide">
             <img src="./images/02.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/03.jpg" alt="">
         </div>
         <div class="swiper-slide">
          <img src="./images/04.jpg" alt="">
       </div>
       <div class="swiper-slide">
        <img src="./images/05.jpg" alt="">
     </div>
     <div class="swiper-slide">
      <img src="./images/06.jpg" alt="">
   </div>
       </div>
       <div class="swiper-pagination"></div>
    </div>
 </div> 

 <!-- 轮播图 -->
 <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            ToT
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <div class="card bg-dark text-white">
          <img src="./images/07.jpg" class="card-img" alt="...">
          <div class="card-img-overlay">
            <h5 class="card-title">回来吧</h5>
            <p class="card-text">sry</p>
            <p class="card-text">srysrysry</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          ToT
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        
        <div class="card bg-dark text-white">
          <img src="./images/08.jpg" class="card-img" alt="...">
          <div class="card-img-overlay">
            <h5 class="card-title">对不起</h5>
            <p class="card-text">我们重新开始</p>
            <p class="card-text">5555</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          ToT
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        <div class="card bg-dark text-white">
          <img src="./images/09.jpg" class="card-img" alt="...">
          <div class="card-img-overlay">
            <h5 class="card-title">呜呜呜呜呜</h5>
            <p class="card-text">我以后不负情绪了</p>
            <p class="card-text">555</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          ToT
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        <div class="card bg-dark text-white">
          <img src="./images/10.jpg" class="card-img" alt="...">
          <div class="card-img-overlay">
            <h5 class="card-title">以后天天打电话好不好</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


   



 
</body>
<style>
  .card-img{
    width: 17rem;
  }


  body{
    background-image: url("./images/xk.jpg");
  }
.focus {
  margin-top: 10px;
  height: 20.4rem;
  margin-bottom: 2.8rem;

}
.focus .swiper-slide {
  text-align: center;
}
.focus .swiper-slide img {
  height: 20.4rem;
  width: 19.4rem;
}

.focus_item{
  position: absolute;
   color: purple;
   z-index: 100;
   font-size:0.8rem;
   left: 4rem;
   top: 5rem;
}
.focus_item1{
  position: absolute;
   color: pink;
   z-index: 100;
   font-size:0.8rem;
   left: 7rem;
   top: 17rem;
}
.focus_item2{
  position: absolute;
   color: cyan;
   z-index: 100;
   font-size:0.8rem;
   right: 4rem;
   top: 10rem;
}




    /* 头部 */
   .header{
    height: 2.5rem;
    background-color: plum;
   }
   .nav-item a{
    color: white !important;
   }
 
   .nav-item a:hover{
    color:green !important;
   }
 

   #audio_btn {
            position: fixed;
            right: 8px;
            top: 0;
            z-index: 200;
            display: none;
            width: 32px;
            height: 32px;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        .play_yinfu {
            position: fixed;
            right: 10px;
            float: right;
            top: 1px;
            width: 30px;
            height: 30px;
            background-image: url("./images/music.gif");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 60px 60px;
        }

        .rotate {
            position: fixed;
            right: 10px;
            float: right;
            top: 1px;
            width: 30px;
            height: 30px;
            background-size: 100% 100%;
            background-image: url("./images/music_off.png");
            -webkit-animation: rotating 1.2s linear infinite;
            -moz-animation: rotating 1.2s linear infinite;
            -o-animation: rotating 1.2s linear infinite;
            animation: rotating 1.2s linear infinite;
        }


        @-webkit-keyframes rotating {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes rotating {
            from {
                -moz-transform: rotate(0deg);
            }
            to {
                -moz-transform: rotate(360deg);
            }
        }

        .off {
            position: fixed;
            right: 10px;
            float: right;
            top: 1px;
            background-size: 100% 100%;
            background-image: url("./images/music_no.png");
            background-repeat: no-repeat;
            background-position: center center;
        }

  .accordion{
    margin-bottom: 30rem !important;
  }
    

</style>
</style>
<script>


   var swiper = new Swiper(".mySwiper", {
    loop: true,
    autoplay:true,
     pagination: {
       el: ".swiper-pagination",
       dynamicBullets: true,
     },
   });
</script>

</html>